<template>
  <xn-form-container :title="formData.id ? '编辑套餐表' : '增加套餐表'" :width="700" :visible="visible" :destroy-on-close="true"
    @close="onClose">
    <a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
      <a-form-item label="序号：" name="serialNo">
        <a-input v-model:value="formData.serialNo" placeholder="请输入序号" allow-clear />
      </a-form-item>
      <a-form-item label="套餐名称：" name="comboName">
        <a-input v-model:value="formData.comboName" placeholder="请输入套餐名称" allow-clear />
      </a-form-item>
      <a-form-item label="价格：" name="priceAmt">
        <a-input v-model:value="formData.priceAmt" placeholder="请输入价格" allow-clear />
      </a-form-item>
      <a-form-item label="包含的项目/商品：" name="remark">
        <a-select v-model:value="formData.project" mode="tags" style="width: 100%">
          <a-select-option :value="item.id" v-for="item in allShopList">{{ item.goodsName }}</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
      <a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
    </template>
  </xn-form-container>
</template>

<script setup name="bizComboForm">
import { cloneDeep } from 'lodash-es'
import bizGoodsApi from '@/api/biz/bizGoodsApi'
import bizComboApi from '@/api/biz/bizComboApi'
// 抽屉状态
const visible = ref(false)
const emit = defineEmits({ successful: null })
const formRef = ref()
// 表单数据
const formData = ref({})
const submitLoading = ref(false)
let allShopList = ref([])
// 打开抽屉
const onOpen = (record) => {
  visible.value = true
  if (record) {
    let recordData = cloneDeep(record)
    formData.value = Object.assign({}, recordData)
  }
}

const getAllShopList = () => {
  bizGoodsApi.bizGoodsPage({
    current: 1, size: 999
  }).then(res => {
    allShopList.value = res.records
  })
}
getAllShopList()
// 关闭抽屉
const onClose = () => {
  formRef.value.resetFields()
  formData.value = {}
  visible.value = false
}
// 默认要校验的
const formRules = {
}
// 验证并提交数据
const onSubmit = () => {
  formRef.value.validate().then(() => {
    submitLoading.value = true
    const formDataParam = cloneDeep(formData.value)
    bizComboApi
      .bizComboSubmitForm(formDataParam, formDataParam.id)
      .then(() => {
        onClose()
        emit('successful')
      })
      .finally(() => {
        submitLoading.value = false
      })
  })
}
// 抛出函数
defineExpose({
  onOpen
})
</script>
